<%--
  作者: 小梁子
  创建时间: 2020/10/4 11:45
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>教师信息</h5>
                </div>
                <div class="ibox-content">
                    <div <%--style="float: left"--%>style="margin-left: 5%">
                        <a onclick=" " href="" class="btn btn-primary "><i class="fa fa-refresh"></i></a>
                    </div>
                    <table class="table table-striped table-bordered table-hover " id=""
                           style="text-align: center;width: 90%;margin-left: 5%;margin-right: 5%">
                        <thead>
                        <tr>
                            <th style="width: 15%;text-align: center">教师ID</th>
                            <th style="width: 15%;text-align: center">教师姓名</th>
                            <th style="width: 15%;text-align: center">班级名</th>
                            <th style="width: 10%;text-align: center">课程</th>
                            <th style="width: 10%;text-align: center">性别</th>
                            <th style="width: 15%;text-align: center">电话</th>
                            <th style="text-align: center">操作</th>
                        </tr>
                        </thead>
                        <tbody class="table table-striped table-bordered table-hover" id="tb">

                        </tbody>

                    </table>
                    <div class="margin" style="margin-left: 5%">
                        每一页显示<select id="pageSizeSelect" onchange="onSelectChange()">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                    </select> 条数据，
                        当前是第<span id="currentPageSpan"></span> 页，
                        总共<span id="totalPageSpan"></span> 页
                        <button class="button" onclick="firstPage()">首页</button>
                        <button class="button" onclick="prePage()">上一页</button>
                        <button class="button" onclick="nextPage()">下一页</button>
                        <button class="button" onclick="lastPage()">尾页</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%--修改模态框--%>
<div class="modal inmodal" id="editModal">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" onclick="clearData()" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">关闭</span>
                </button>
                <i class="fa fa-book modal-icon"></i>
                <h4 class="modal-title">修改教师信息</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="teacherIdEdit">
                <label class="control-label">教师姓名</label>
                <input class="form-control" type="text" id="teacherNameEdit" placeholder="请输入教师姓名">
                <label class="control-label">可修改课程</label>
                <select class="form-control m-b" name="account" id="surplusCourse">
                </select>
                <label class="control-label">性别</label>
                <div class="radio">
                    <label>
                        <input type="radio" value="1" id="sexNan" name="sexEdit">男</label>
                    <label>
                        <input type="radio" value="0" id="sexNv" name="sexEdit">女</label>
                </div>
                <label class="control-label">电话</label>
                <input class="form-control" type="text" id="teacherPhoneEdit" maxlength="11"
                       oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入老师电话号码">
            </div>
            <div class="modal-footer">
                <button class="button btn-primary" onclick="clearData()">取消</button>
                <button class="button btn-primary" onclick="putEditAjax()">确定</button>
            </div>
        </div>
    </div>
</div>


<!-- 全局js -->
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js?v=3.3.6"></script>


<!-- Peity -->
<script src="${pageContext.request.contextPath}/static/js/plugins/peity/jquery.peity.min.js"></script>

<!-- 自定义js -->
<script src="${pageContext.request.contextPath}/static/js/content.js?v=1.0.0"></script>


<!-- iCheck -->
<script src="${pageContext.request.contextPath}/static/js/plugins/iCheck/icheck.min.js"></script>

<!-- Peity -->
<script src="${pageContext.request.contextPath}/static/js/demo/peity-demo.js"></script>

<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });
</script>


<script>
    //当前页码
    var currentPage = 1;
    //每页的记录个数
    var pageSize = 5;
    //总共多少页
    var totalPage;
    $(function () {
        //显示当前分页数据
        loadList();

    });

    //用户修改的每页的记录数
    function onSelectChange() {
        pageSize = $("#pageSizeSelect").val();
        loadList();
    }

    //首页的回调方法
    function firstPage() {
        currentPage = 1;
        loadList();
    }

    //上一页回调方法
    function prePage() {
        currentPage--;
        if (currentPage < 1) {
            currentPage = 1;
        }
        loadList();
    }

    //下一页回调方法
    function nextPage() {
        currentPage++;
        if (currentPage > totalPage) {
            currentPage = totalPage;
        }
        loadList();
    }

    //尾页回调方法
    function lastPage() {
        currentPage = totalPage;
        loadList();
    }

    //发送修改后的数据
    function putEditAjax() {
        var teacherIdEdit = $("#teacherIdEdit").val();//获取修改模态框中的ID值
        var teacherNameEdit = $("#teacherNameEdit").val();//获取修改模态框中的教师姓名
        var teacherSexEditVal = $('input:radio[name="sexEdit"]:checked').val();//获取修改模态框中的教师性别
        var courseIdEditVal=$("#surplusCourse").val();//获取修改后的课程
        var teacherPhoneEdit = $("#teacherPhoneEdit").val();//获取修改模态框中的教师联系电话
        var dataValue = {
            "teacherId": teacherIdEdit,
            "teacherName": teacherNameEdit,
            "courseId": courseIdEditVal,
            "teacherSex": teacherSexEditVal,
            "teacherPhone": teacherPhoneEdit,
        };
        $.ajax({
            url: "${pageContext.request.contextPath}/teacherInfo/editTeacherInfo",
            type: 'post',
            contentType: "application/x-www-form-urlencoded",
            dataType: 'json',
            data: dataValue,
            success: function (result) {
                if (result.code == 0) {
                    parent.layer.msg("修改教师信息失败", {icon: 2, time: 2000});
                    clearData()//关闭并清空模态编辑框
                    loadList();//刷新页面
                } else {
                    parent.layer.msg("修改教师信息成功", {icon: 1, time: 2000});
                    clearData()//关闭并清空模态编辑框
                    loadList();//刷新页面
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //加载教师信息列表数据
    function loadList() {
        $.ajax({
            url: "${pageContext.request.contextPath}/teacherInfo/queryAllTeacherByUserId",
            type: 'get',
            dataType: 'json',
            data: {"currentPage": currentPage, "pageSize": pageSize},
            success: function (result) {
                if (result.code == 0) {
                    console.log(result.teachers);
                    showList(result.teachers);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //显示教师信息
    function showList(teachersList) {
        var html = '';
        for (var i = 0; i < teachersList.length; i++) {
            var item = teachersList[i];
            console.log(JSON.stringify(item));
            html += "<tr>";
            html += "<td> " + item.teacherId + "</td>";
            html += "<td>" + item.teacherName + "</td>";
            html += "<td> ";
            if (item.classes.length == 0){
                html +="空";
            }else {
                for( var j in item.classes){
                    html+= item.classes[j].className+"<br>";
                }
            }
            html +="</td>";
            html += "<td> " + item.courseName + " </td>";
            if (item.teacherSex == 0) {
                html += "<td><i class=\"fa fa-venus\"></i></td>";
            } else {
                html += "<td><i class=\"fa fa-mars\"></i></td>";
            }
            html += "<td> " + item.teacherPhone + " </td>";
            html += "<td><button class='btn btn-primary' onclick='getUserDetail(\"" + item.teacherId + "\")'><i class=\"fa fa-edit\"></i></button>" +
                "&nbsp<button onclick='deleteOneTeacher(\"" + item.teacherId + "\")' class='btn btn-primary'><i class=\"fa fa-trash\"></button></td>";
            html += "</tr>";
        }
        $("#tb").html(html);
    }

    //获取当前记录的教师基本信息
    function getUserDetail(teacherId) {
        clearData();
        $.ajax({
            url: "${pageContext.request.contextPath}/teacherInfo/getOneteacherInfoById",
            type: "post",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            data: {"teacherId": teacherId},
            success: function (result) {
                if (result.code == 0) {
                    //自动在模态框中显示值
                    console.log(JSON.stringify(result));
                    $("#teacherIdEdit").val(result.teacher.teacherId);
                    $("#teacherNameEdit").val(result.teacher.teacherName);
                    for (var x in result.surplusCourse){
                        $("#surplusCourse").append("<option value="+result.surplusCourse[x].courseId+">"+result.surplusCourse[x].courseName+"</option>");
                    }
                    $("#surplusCourse").val(result.teacher.courseId);

                    var sex = result.teacher.teacherSex;
                    if (sex == "0") {
                        $("input:radio[name='sexEdit'][value= '0']").prop("checked", "true");
                    } else {
                        $("input:radio[name='sexEdit'][value= '1']").prop("checked", "true");
                    }
                    $("#teacherPhoneEdit").val(result.teacher.teacherPhone);
                    $('#editModal').modal('show')
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //逻辑删除一个教师
    function deleteOneTeacher(id) {
        $.ajax({
            url: "${pageContext.request.contextPath}/teacherInfo/deleteOneTeacher",
            type: "post",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            data: {"id": id},
            success: function (result) {
                if (result.code ==-1) {
                    parent.layer.msg("删除该教师信息失败" ,{icon: 2, time: 2000});
                    loadList();
                }else {
                    parent.layer.msg("删除该教师信息成功" ,{icon: 1, time: 2000});
                    loadList();
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
    //关闭模态框并清空模态框中的数据
    function clearData(){

        //编辑模态框清空
        $("#teacherIdEdit").val("");
        $("#teacherNameEdit").val("");
        $("input:radio[name='sexEdit'][value= '1']").prop("checked",false);
        $("input:radio[name='sexEdit'][value= '0']").prop("checked",false);
        $("#surplusCourse").empty();
        $("#teacherPhoneEdit").val("");
        $("#editModal").modal("hide");

    }

</script>
</body>
</html>

